<template>
  <div id="app">
    <Header></Header>
    <Nav></Nav>
    <!-- 搜索框 -->
    <p class="demonstration">【六一特别活动】“童心童画”主题活动激烈评选中...]！</p>
    <!-- 轮播图 -->
    <div class="slider">
      <el-carousel indicator-position="outside" height="450px">
        <el-carousel-item v-for="item in 4" :key="item">
          <!-- <h3>{{ item }}</h3> -->
        </el-carousel-item>
      </el-carousel>
    </div>
    <!-- 作品 -->
    <p style="font-size: 40px;margin-left: 249px;">幼儿作品</p>
    <div class="content" v-for="(ap, index) in pollAll" :key="ap.id">
      <div class="content1" style="float:left;">
        <a href="###">
          <img src="../assets/ammucation_zp1.webp" v-if="index == 0">
          <img src="../assets/ammucation_zp2.webp" v-if="index == 1">
          <img src="../assets/ammucation_zp3.webp" v-if="index == 2">
          <img src="../assets/ammucation_zp4.webp" v-if="index == 3">
          <img src="../assets/ammucation_zp5.webp" v-if="index == 4">
          <img src="../assets/ammucation_zp6.webp" v-if="index == 5">
          <img src="../assets/ammucation_zp7.webp" v-if="index == 6">
          <img src="../assets/ammucation_zp8.webp" v-if="index == 7">
          <img src="../assets/ammucation_zp9.webp" v-if="index == 8">
          <p>{{ ap.troduction }}</p>
          <i @click="addPoll(index)" class="el-icon-magic-stick icon"></i><span>{{ ap.poll }}票</span>
        </a>
      </div>
    </div>

    <div style="margin-top: 1000px;">
      <Footer></Footer>
    </div>

  </div>
</template>

<script>
import Header from '../components/header.vue'
import Nav from '../components/nav.vue'
import Footer from '../components/footer.vue'
import { onMounted } from 'vue';

export default {
  name: 'application_center',
  components: {
    Header,
    Nav,
    Footer
  },
  data() {
    return {
      pollAll: [],
      flag: false,
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    }

  },
  mounted() {
    this.$axios.get('/api/ammucation/pollAll')
      .then(res => {
        this.pollAll = res.data
      })
  },
  methods: {
    addPoll(index) {
      // this.flag = false
      if (this.flag == false) {
        this.pollAll[index].poll++
        console.log(this.pollAll[index].poll)
        //修改票数
        this.$axios.post(`/api/ammucation/updatePoll/${this.pollAll[index].id}`, { poll: this.pollAll[index].poll })
          .then(res => {
            alert("投票成功")
          })
        this.flag = 'true'
      } else {
        alert('您已经投过票了')
      }
    }
  }
}
</script>

<style scoped>
a {
  text-decoration: none;
  color: black;
}

label {
  font-size: 200px;
  z-index: 999;
}

.garden {
  width: 856px;
  height: 337px;
  border: 1px solid gray;
}

.search {
  margin-top: 30px;
  margin-left: 550px;
}

.btn {
  margin-left: -15px;
  height: 42px;
}

.demonstration {
  margin-left: 200px;
  font-size: 40px;
  font-weight: bolder;
}

/* 轮播图 */
.slider {
  margin-left: 260px;
  width: 800px;
  height: 500px;
}

.el-carousel__item:nth-child(2n) {
  background-image: url(../assets/ammucation_lbt1.webp);
  background-repeat: no-repeat;
  background-size: 100%;
}

.el-carousel__item:nth-child(2n+1) {
  background-image: url(../assets/ammucation_lbt2.webp);
  background-repeat: no-repeat;
  background-size: 100%;
}

/* 作品 */
.content {
  margin-left: 260px;
  width: 800px;
  /* border: 1px solid gray; */
}

.content1 {
  margin-left: 50px;
  margin-top: 30px;
  margin-bottom: 50px;
  width: 193px;
  height: 245px;
  border: 1px solid gray;
}

.content1 img {
  width: 193px;
  height: 142px;
}

.content1 span {
  margin-left: 10px;
  color: red;
  font-size: 20px;
}

.icon {
  margin-left: 40px;
  font-size: 20px;
  color: blue;
}
</style>
